import { Meta, Canvas } from '@storybook/addon-docs';

<Meta
  title="Components/Lists"
/>

# Lists

## Bare list

Per default, all styles from `ul` and `ol` lists are removed:

<Canvas>
<ul>
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

## Lists in the main content

In the `main` element, the lists have a default style applied
<Canvas>
  <main>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <ol>
      <li>List item</li>
      <li>List item</li>
    </ol>
  </main>
</Canvas>

Use `.list .list--bare` in case you want to remove eventual default styles on your list

## Dotted List

Out of the `main` element, use `.list .list--default` variant on `ul` for dotted lists.
This can be applied on a `ol` list too.

<Canvas>
<ul class="list list--default">
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

## Ordered List

Use `.list .list--ordered` variant on `ol` for decimal lists.
This can be applied on a `ul` list too.

<Canvas>
<ol class="list list--ordered">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
</Canvas>

Use `.list .list--roman` for roman glyphs:
<Canvas>
<ol class="list list--roman">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ol>
</Canvas>


## Loose Variant

`.list--loose` add more space between items

<Canvas>
<ul class="list list--default list--loose">
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

## Negative List

<Canvas style={{ backgroundColor: '#2f4356' }}>
<ul class="list list--default list--negative">
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

## Horizontal Lists

`.list--flex` display list items horizontally, without wrapping
<Canvas>
<ul class="list list--flex">
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

`.list--flex list--wrap` display list items horizontally, with wrapping
<Canvas>
<ul class="list list--flex list--wrap">
  <li>List item</li>
  <li>List item</li>
</ul>
</Canvas>

# Custom icons

## List with small custom icons

<Canvas>
<ul class="list list--icon">
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--md">
      <path d="m14.858 5.803-.65.375 2.418 4.187h-12.56v8.395h.75v-7.645h11.81l-2.418 4.188.65.375 2.85-4.938z" />
    </svg>
    <div>List item</div>
  </li>
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--md">
      <path d="m14.858 5.803-.65.375 2.418 4.187h-12.56v8.395h.75v-7.645h11.81l-2.418 4.188.65.375 2.85-4.938z" />
    </svg>
    <div>List item</div>
  </li>
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--md">
      <path d="m14.858 5.803-.65.375 2.418 4.187h-12.56v8.395h.75v-7.645h11.81l-2.418 4.188.65.375 2.85-4.938z" />
    </svg>
    <div>List item</div>
  </li>
</ul>
</Canvas>

## List with larger custom icons

<Canvas>
<ul class="list list--icon list--loose">
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--2xl">
      <path d="m10.15955 17.05322c-.01465.00733-.3487.18457-.427.23145a2.38683 2.38683 0 0 0 -1.17817 1.20508.29547.29547 0 0 0 .11255.32763l.18842.09522a.57724.57724 0 0 0 .257.06152c.47345 0 1.02276-.58984 1.78009-1.91113a17.69186 17.69186 0 0 1 2.74176-.65088 4.7315 4.7315 0 0 0 1.99786.63379.92563.92563 0 0 0 .23494-.0259.40644.40644 0 0 0 .23364-.15918.84654.84654 0 0 0 .093-.57129.38918.38918 0 0 0 -.11255-.19336 1.56607 1.56607 0 0 0 -1.0094-.23828 8.29273 8.29273 0 0 0 -1.21363.08936 3.02934 3.02934 0 0 1 -.5628-.38916 4.10663 4.10663 0 0 1 -1.01669-1.57709c.01464-.05762.02691-.10742.03912-.15918a10.25809 10.25809 0 0 0 .17865-1.84717.54241.54241 0 0 0 -.0318-.13232l-.02081-.05371a.43728.43728 0 0 0 -.39887-.30567l-.11986-.00395h-.00244a.45066.45066 0 0 0 -.46.28906 5.35027 5.35027 0 0 0 .28015 2.40869l-.07093.17139c-.197.48193-.44415.9663-.66192 1.39355l-.02814.05518c-.23.44873-.438.83056-.62762 1.15332zm-1.15 1.5625a3.28585 3.28585 0 0 1 .93345-1.11718c.03179-.02588.1101-.09912.18109-.16748a3.37745 3.37745 0 0 1 -1.11457 1.28466zm6.06342-2.332a1.94209 1.94209 0 0 1 .63251.06836c.2716.06983.27526.21045.22754.23975a.70123.70123 0 0 1 -.26551.04541 3.1125 3.1125 0 0 1 -1.10107-.333c.18472-.01324.35477-.02055.5065-.02055zm-3.07086-4.56006c.15167 0 .23858.38331.24591.74268a1.52565 1.52565 0 0 1 -.18109.79883 3.87662 3.87662 0 0 1 -.12848-.99707s-.00614-.54447.06363-.54447zm-.564 4.30909a11.2277 11.2277 0 0 0 .57745-1.26026 4.16653 4.16653 0 0 0 .95307 1.18311c.04773.03906.0979.07959.14929.12012a12.07229 12.07229 0 0 0 -2.00891.55908q.15962-.28422.32904-.60208z"></path>
<path d="m9.77027 4.06641v.01759l-4.13127 5.68553h-.0235v10.88037h13.519v-16.58349zm0 1.29248v4.41064h-3.20484zm8.61425 14.541h-12.01904v-9.38036h4.15479v-5.70312h7.86425z"></path>
    </svg>
    <div>List item</div>
  </li>
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--2xl">
      <path d="m10.15955 17.05322c-.01465.00733-.3487.18457-.427.23145a2.38683 2.38683 0 0 0 -1.17817 1.20508.29547.29547 0 0 0 .11255.32763l.18842.09522a.57724.57724 0 0 0 .257.06152c.47345 0 1.02276-.58984 1.78009-1.91113a17.69186 17.69186 0 0 1 2.74176-.65088 4.7315 4.7315 0 0 0 1.99786.63379.92563.92563 0 0 0 .23494-.0259.40644.40644 0 0 0 .23364-.15918.84654.84654 0 0 0 .093-.57129.38918.38918 0 0 0 -.11255-.19336 1.56607 1.56607 0 0 0 -1.0094-.23828 8.29273 8.29273 0 0 0 -1.21363.08936 3.02934 3.02934 0 0 1 -.5628-.38916 4.10663 4.10663 0 0 1 -1.01669-1.57709c.01464-.05762.02691-.10742.03912-.15918a10.25809 10.25809 0 0 0 .17865-1.84717.54241.54241 0 0 0 -.0318-.13232l-.02081-.05371a.43728.43728 0 0 0 -.39887-.30567l-.11986-.00395h-.00244a.45066.45066 0 0 0 -.46.28906 5.35027 5.35027 0 0 0 .28015 2.40869l-.07093.17139c-.197.48193-.44415.9663-.66192 1.39355l-.02814.05518c-.23.44873-.438.83056-.62762 1.15332zm-1.15 1.5625a3.28585 3.28585 0 0 1 .93345-1.11718c.03179-.02588.1101-.09912.18109-.16748a3.37745 3.37745 0 0 1 -1.11457 1.28466zm6.06342-2.332a1.94209 1.94209 0 0 1 .63251.06836c.2716.06983.27526.21045.22754.23975a.70123.70123 0 0 1 -.26551.04541 3.1125 3.1125 0 0 1 -1.10107-.333c.18472-.01324.35477-.02055.5065-.02055zm-3.07086-4.56006c.15167 0 .23858.38331.24591.74268a1.52565 1.52565 0 0 1 -.18109.79883 3.87662 3.87662 0 0 1 -.12848-.99707s-.00614-.54447.06363-.54447zm-.564 4.30909a11.2277 11.2277 0 0 0 .57745-1.26026 4.16653 4.16653 0 0 0 .95307 1.18311c.04773.03906.0979.07959.14929.12012a12.07229 12.07229 0 0 0 -2.00891.55908q.15962-.28422.32904-.60208z"></path>
<path d="m9.77027 4.06641v.01759l-4.13127 5.68553h-.0235v10.88037h13.519v-16.58349zm0 1.29248v4.41064h-3.20484zm8.61425 14.541h-12.01904v-9.38036h4.15479v-5.70312h7.86425z"></path>
    </svg>
    <div>List item</div>
  </li>
  <li>
    <svg viewBox="0 0 24 24" class="icon icon--2xl">
      <path d="m10.15955 17.05322c-.01465.00733-.3487.18457-.427.23145a2.38683 2.38683 0 0 0 -1.17817 1.20508.29547.29547 0 0 0 .11255.32763l.18842.09522a.57724.57724 0 0 0 .257.06152c.47345 0 1.02276-.58984 1.78009-1.91113a17.69186 17.69186 0 0 1 2.74176-.65088 4.7315 4.7315 0 0 0 1.99786.63379.92563.92563 0 0 0 .23494-.0259.40644.40644 0 0 0 .23364-.15918.84654.84654 0 0 0 .093-.57129.38918.38918 0 0 0 -.11255-.19336 1.56607 1.56607 0 0 0 -1.0094-.23828 8.29273 8.29273 0 0 0 -1.21363.08936 3.02934 3.02934 0 0 1 -.5628-.38916 4.10663 4.10663 0 0 1 -1.01669-1.57709c.01464-.05762.02691-.10742.03912-.15918a10.25809 10.25809 0 0 0 .17865-1.84717.54241.54241 0 0 0 -.0318-.13232l-.02081-.05371a.43728.43728 0 0 0 -.39887-.30567l-.11986-.00395h-.00244a.45066.45066 0 0 0 -.46.28906 5.35027 5.35027 0 0 0 .28015 2.40869l-.07093.17139c-.197.48193-.44415.9663-.66192 1.39355l-.02814.05518c-.23.44873-.438.83056-.62762 1.15332zm-1.15 1.5625a3.28585 3.28585 0 0 1 .93345-1.11718c.03179-.02588.1101-.09912.18109-.16748a3.37745 3.37745 0 0 1 -1.11457 1.28466zm6.06342-2.332a1.94209 1.94209 0 0 1 .63251.06836c.2716.06983.27526.21045.22754.23975a.70123.70123 0 0 1 -.26551.04541 3.1125 3.1125 0 0 1 -1.10107-.333c.18472-.01324.35477-.02055.5065-.02055zm-3.07086-4.56006c.15167 0 .23858.38331.24591.74268a1.52565 1.52565 0 0 1 -.18109.79883 3.87662 3.87662 0 0 1 -.12848-.99707s-.00614-.54447.06363-.54447zm-.564 4.30909a11.2277 11.2277 0 0 0 .57745-1.26026 4.16653 4.16653 0 0 0 .95307 1.18311c.04773.03906.0979.07959.14929.12012a12.07229 12.07229 0 0 0 -2.00891.55908q.15962-.28422.32904-.60208z"></path>
<path d="m9.77027 4.06641v.01759l-4.13127 5.68553h-.0235v10.88037h13.519v-16.58349zm0 1.29248v4.41064h-3.20484zm8.61425 14.541h-12.01904v-9.38036h4.15479v-5.70312h7.86425z"></path>
    </svg>
    <div>List item</div>
  </li>
</ul>
</Canvas>
